<template>
  <div id="app">
      <!-- <Instruct/> -->
      <!-- <Computed/> -->
      <!-- <Watch/> -->
      <!-- <Directives/> -->
      <!-- <Mixin/> -->
      <!-- <Life/> -->
      <!-- <Father/> -->
      <!-- <Father/> -->
      <!-- <GrandFather/> -->
      <!-- <SlotCom/>
      <SlotCom>
        <h3 slot="header">头部</h3>
        <h3 slot="footer">脚部</h3>
      </SlotCom> -->
      <!-- <Filters/> -->

      <main class="main">
        <!-- exclude  不需要缓存的组件 -->
        <!-- include  需要缓存的组件 -->
        <!-- 多个name 加空格识别不了 -->
        <keep-alive include="about-com,my-com">
          <router-view/>
        </keep-alive>
      </main>
      <footer class="footer">
        <router-link active-class="active" to="/home" tag="span">首页</router-link>
        <router-link active-class="active" to="/about" tag="span">测试</router-link>
        <router-link active-class="active" to="/my" tag="span">我的</router-link>
      </footer>
  </div>
</template>

<script>
// import Instruct from './components/Instruct.vue';
// import Computed from './components/Computed.vue';
// import Watch from './components/Watch.vue';
// import Directives from './components/Directives.vue';
// import Mixin from './components/Mixin.vue';
// import Life from './components/Life.vue';
// import Father from './components/Life/Father.vue';
// import Father from './components/SendData.vue/Father.vue';
// import GrandFather from './components/SendTierData/GrandFather.vue';
// import SlotCom from './components/Slot.vue';
// import Filters from './components/Filters.vue';
export default {
  name: 'App',
  components: {
    // Instruct,
    // Computed,
    // Watch,
    // Directives,
    // Mixin,
    // Life,
    // Father,
    // Father,
    // GrandFather,
    // SlotCom,
    // Filters
  }
}
</script>

<style>
html, body, #app {
  height: 100%;
}

#app {
  display: flex;
  flex-direction: column;
}

#app > .main {
  flex: 1;
}

* {
  margin: 0;
  padding: 0;
}

.footer {
  display: flex;
  line-height: 50px;
}

.footer > span {
  flex: 1;
  text-align: center;
}

.active {
  color: orangered;
}
</style>
